<template>
  <div class="content">
    <div class="left">
      <router-link to="/"><el-button type="text">小米商城</el-button></router-link>
      <router-link to=""><el-button type="text">小米官网</el-button></router-link>
      <router-link to=""><el-button type="text">小米澎湃OS</el-button></router-link>
      <router-link to=""><el-button type="text">小米汽车</el-button></router-link>
      <router-link to=""><el-button type="text">云服务</el-button></router-link>
      <router-link to=""><el-button type="text">有品</el-button></router-link>
      <router-link to=""><el-button type="text">文字按钮</el-button></router-link>
      <router-link to=""><el-button type="text">资源证照</el-button></router-link>
      <router-link to=""><el-button type="text">协议规则</el-button></router-link>
      <router-link to=""><el-button type="text">下载app</el-button></router-link>
      <router-link to=""><el-button type="text">SelectLocation</el-button></router-link>
    </div>

    <div class="right">
      <router-link to="/login"><el-button type="text">登录</el-button></router-link>
      <router-link to="/registration"><el-button type="text">注册</el-button></router-link>
      <router-link to=""><el-button type="text">消息通知</el-button></router-link>
      <router-link to="/cart"><el-button type="text">购物车(0)</el-button></router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  methods: {},
};
</script>

<style scoped>
.content {
  width: 1500px;
  margin: 0 auto;
  background-color: #545c64;
  line-height: 60px;
}
.content:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.left {
  width: auto;
  float: left;
  margin-left: 20px;
}
.right {
  width: auto;
  float: right;
  margin-right: 20px;
}
.el-button {
  color: white;
  font-size: 16px;
  height: 60px;
  margin-right: 20px;
}
.el-button:hover{
  color: #409eff;
}
</style>
